<?xml version="1.0" encoding="UTF-8" ?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
				xmlns:ui="http://java.sun.com/jsf/facelets"
				xmlns:h="http://java.sun.com/jsf/html"
				xmlns:f="http://java.sun.com/jsf/core" 
				xmlns:c="http://java.sun.com/jstl/core" 
                xmlns:p="http://primefaces.org/ui"
				lang="pt"  
				template="/common/decorators/arearestrita/template.xhtml">
  
	<ui:define name="body"> 
		<h1 class="cont"><span><h:outputText value="Produtos" /></span></h1>
		<h:form id="produtoForm" prependId="false"> 
			<p:growl id="msg" showDetail="true" life="3000" /> 
			
			<p:panel header="Filtros" styleClass="painelComum" style="width: 1100px; ">  
			   	<h:panelGrid columns="2" >    
					    <h:outputText value="Categoria:" styleClass="labelClass" />
						<h:selectOneMenu value="#{produtoBean.dto.codCategoria}" styleClass="ui-inputfield ui-widget ui-state-default ui-corner-all">
							<f:selectItems value="#{produtoBean.categorias}" /> 
						</h:selectOneMenu>    
				     

					   <h:outputText value="Nome:" styleClass="labelClass"/> 
					   <p:inputText value="#{produtoBean.dto.nome}" /> 

					   <h:outputText value="Número do Produto:" styleClass="labelClass"/> 
					   <p:inputText value="#{produtoBean.dto.numProduto}"/> 
					   
					   <h:outputText value="Situação:" styleClass="labelClass" />
					   <h:selectOneRadio value="#{produtoBean.dto.status}" styleClass="ui-inputfield ui-widget ui-state-default ui-corner-all">
							<f:selectItem itemLabel="Ativo"   itemValue="true" />
							<f:selectItem itemLabel="Inativo" itemValue="false" />
					   </h:selectOneRadio>  
  
						<p:commandButton value="Pesquisar"  
		                                 action="#{produtoBean.pesquisarProdutos}"  
						                 ajax="false"/>  
						                 
						<p:commandButton value="Novo Produto"   
										 action="#{produtoBean.novoProduto}" 
						                 update="formulario"  
						                 onclick="mpProduto.show();" />    
		     	</h:panelGrid>    
            </p:panel>  
            
            <p:panel header="Resultado da pesquisa" styleClass="painelComum" style="width: 1100px" >  
				<p:dataTable id="resultadoPesquisa"  
								value="#{produtoBean.dto.listProduto}" 
								var="produto" 
								width="100%"
                                   paginator="true" 
                                   paginatorPosition="bottom"
                                   rows="10" 
								rendered="#{not empty produtoBean.dto.listProduto}"  >
                   
                   	<p:column><f:facet name="header">Número</f:facet>#{produto.numProduto}</p:column>
                   	<p:column><f:facet name="header">Nome</f:facet>#{produto.nome}</p:column>
                   	<p:column><f:facet name="header">Categoria</f:facet>#{produto.categoria.descricao}</p:column>
 
                   	<p:column >
						<f:facet name="header">Valor</f:facet> 
						<h:outputText value="#{produto.valor}" converter="converteValor"/> 
					</p:column>
					 
                   	<p:column>
						<f:facet name="header">Em Promoção?</f:facet> 
						<h:outputText value="Sim" rendered="#{produto.promocao}"/>  
						<h:outputText value="Não" rendered="#{!produto.promocao}"/>  
					</p:column> 
                   
                   	<p:column style="text-align: right">
						<f:facet name="header">Valor da Promoção</f:facet> 
						<h:outputText value="#{produto.valorPromocao}" converter="converteValor"/>  
					</p:column> 
                   
                   	<p:column>
						<f:facet name="header">Situação</f:facet>  
						<h:outputText value="Ativo" rendered="#{produto.status}"/>  
						<h:outputText value="Inativo" rendered="#{!produto.status}"/> 
					</p:column>
					
                   	<p:column>
						<f:facet name="header"></f:facet>  
						<h:graphicImage value="/common/images/produtos/#{produto.imagem}" style="border: none;" width="80" height="40"/> 
					</p:column>
					
					 
                   	<p:column>
						<f:facet name="header"> </f:facet>   
						
						<p:commandLink title="Editar" oncomplete="mpProduto.show();" action="#{produtoBean.loadImagem}"  update="formulario" style="border: none"> 
							<h:graphicImage value="/common/images/alter_16x16.png" style="border: none"/>
							<f:setPropertyActionListener value="#{produto}" target="#{produtoBean.dto.produto}" /> 
						</p:commandLink>   
						
						<p:commandLink action="#{produtoBean.alterarStatusProduto}" update="produtoForm,msg"> 
							<h:graphicImage value="/common/images/remover-icon.png" style="border:0px;" rendered="#{produto.status}"/>
							<h:graphicImage value="/common/images/ativo_16x16.png" style="border:0px;" rendered="#{!produto.status}"/>
							<f:setPropertyActionListener value="#{produto}" target="#{produtoBean.dto.produto}" />
						</p:commandLink>  
					</p:column>
				</p:dataTable>
				
				<h:outputText rendered="#{empty produtoBean.dto.listProduto}" >
					<p class="note"><i>Favor realizar a pesquisa para mostrar os resultados.</i></p>
				</h:outputText>
            </p:panel>    
		</h:form> 
            
            
		<p:dialog id="mpProduto" header="Produto"  modal="true" widgetVar="mpProduto" minWidth="600" showEffect="explode" hideEffect="explode"> 
			<h:form id="formulario">   
				<p:panel> 
					<h:panelGrid columns="2"> 
						<h:panelGrid columns="2"> 
						    <h:outputText value="Categoria:" styleClass="labelClass" />
						    <h:panelGrid columns="2"> 
						      <h:selectOneMenu value="#{produtoBean.dto.produto.codCategoria}" styleClass="ui-inputfield ui-widget ui-state-default ui-corner-all" style="width: 150px">
								<f:selectItems value="#{produtoBean.categorias}" /> 
						      </h:selectOneMenu>  
							  <p:commandButton value="Nova Categoria" onclick="mpCategoria.show();"/> 
						    </h:panelGrid> 
								
							<h:outputText value="Nome:"  styleClass="labelClass"/>
							<p:inputText value="#{produtoBean.dto.produto.nome}"  style="width: 150px"/>
								
						    <h:outputText value="Número do Produto:" styleClass="labelClass"/> 
						    <p:inputText value="#{produtoBean.dto.produto.numProduto}" />  
							
							<h:outputText value="Descricao:"  styleClass="labelClass"/>
							<p:inputText value="#{produtoBean.dto.produto.descricao}"  style="width: 150px"/> 
							
							<h:outputText value="Valor:" styleClass="labelClass"/>
			                <p:inputText value="#{produtoBean.dto.produto.valor}" style="width: 150px" id="valorProduto"/> 
			                
							<h:outputText value="Está em Promoção:" styleClass="labelClass"/> 
							<h:selectBooleanCheckbox value="#{produtoBean.dto.produto.promocao}" /> 
							
							<h:outputText value="Valor da Promoção:" styleClass="labelClass"/>
			                <p:inputText value="#{produtoBean.dto.produto.valorPromocao}" style="width: 150px" id="valorDesconto"/>  
						</h:panelGrid>

						<p:panel header="Imagem">  
							<h:panelGrid>
								<p:graphicImage value="#{produtoBean.imagem}"  width="100" height="100"/>  
	                            
								<p:commandButton value="Nova Imagem" onclick="mpUpload.show();" action="#{produtoBean.removerImagem}" />   
							</h:panelGrid>  
						</p:panel>   
						</h:panelGrid> 
					<center>
					<h:panelGrid columns="2"> 
						 
						<p:commandButton value="Salvar"  action="#{produtoBean.salvarProduto}"  onclick="mpProduto.hide();" ajax="false"/>
						<p:commandButton value="Cancelar" onclick="mpProduto.hide();"/>
					</h:panelGrid> 
					</center>
				</p:panel>
			</h:form>  
        </p:dialog> 
             
		
		<p:dialog id="mpUpload" modal="true" widgetVar="mpUpload" minWidth="600" showEffect="explode" hideEffect="explode">   
			<h:form id="mpUploadForm" enctype="multipart/form-data"> 
			<p:fileUpload fileUploadListener="#{produtoBean.upload}"  
				            mode="advanced"  
				            label="Selecione o arquivo"
				            update="formulario,msg"  
				            oncomplete="mpUpload.hide();" 
				            uploadLabel="Carregando..." 
				            auto="true"  
				            sizeLimit="1000000"   
				            allowTypes="/(\.|\/)(gif|jpe?g|png)$/"/>  
			</h:form> 
		</p:dialog>
		 
         
		<p:dialog header="Categoria" autosized="true" modal="true" widgetVar="mpCategoria" width="300" showEffect="explode" hideEffect="explode"> 
			<h:form id="mpCategoriaForm">  
				<p:panel>
					<h:panelGrid columns="2"> 
						
						<h:outputText value="Descricao:" styleClass="labelClass"/>
						<p:inputText value="#{produtoBean.dto.categoria.descricao}" id="descricao"/>
						
						<p:commandButton value="Salvar"  action="#{produtoBean.saveCategoria}"  onclick="mpCategoria.hide();" update="produtoForm, formulario, mpCategoriaForm"/>
						<p:commandButton value="Cancelar" onclick="mpCategoria.hide();"/>
					</h:panelGrid> 
				</p:panel>
			</h:form>   
        </p:dialog>
        
	</ui:define> 	
</ui:composition>